<!-- 小区信息 -->
<template>
    <div class="home">
        <div class="header">
            <p>小区管理/新建小区</p>
            <span>新建小区</span>
        </div>
        <div class="bodyBox">
            <p>基础信息</p>
            <div class="information">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                    :size="formSize" status-icon require-asterisk-position="right">
                    <el-form-item label="小区名称" prop="name">
                        <el-input v-model="ruleForm.name" style="width: 350px;" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="小区编号" prop="number">
                        <el-input v-model="ruleForm.number" style="width: 350px;" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="所属地区" prop="region">
                        <el-cascader v-model="ruleForm.region" placeholder="请选择地区" :options="options"
                            :show-all-levels="false" />
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input v-model="form.address" style="width: 350px;" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="建成日期">
                        <el-date-picker v-model="value1" style="width: 350px;" placeholder="请选择时间" :size="size" />
                    </el-form-item>
                    <el-form-item label="房屋用途">
                        <el-input v-model="form.address" style="width: 350px;" placeholder="请选择" />
                    </el-form-item>
                    <el-form-item label="小区面积" required="true">
                        <el-input type="number" v-model="form.area" style="width: 350px;" placeholder="请选择" />
                        <span class="ss">平方米</span>
                    </el-form-item>
                    <el-form-item label="楼栋数量">
                        <el-input type="number" v-model="form.building" style="width: 350px;" placeholder="请选择" />
                        <span class="ss">栋</span>
                    </el-form-item>
                    <el-form-item label="房屋数量">
                        <el-input type="number" v-model="form.room" style="width: 350px;" placeholder="请选择" />
                        <span class="ss"> 间</span>
                    </el-form-item>
                    <el-form-item label="车位面积">
                        <el-input type="number" v-model="form.parking" style="width: 350px;" placeholder="请选择" />
                        <span class="ss"> 平方米</span>
                    </el-form-item>
                    <el-form-item label="车位数量">
                        <el-input type="number" v-model="form.place" style="width: 350px;" placeholder="请选择" />
                        <span class="ss"> 个</span>
                    </el-form-item>
                    <!-- <el-form-item label="小区图片">
                        <el-upload class="avatar-uploader"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item> -->
                    <el-form-item label="小区简介">
                        <el-input v-model="form.desc" style="width: 400px;" placeholder="请输入" type="textarea" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="foot">
            <p>负责人信息</p>
            <div class="information">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                    :size="formSize" status-icon require-asterisk-position="right">
                    <el-form-item label="姓名" prop="last">
                        <el-input v-model="form.last" style="width: 350px;" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="微信" prop="last">
                        <el-input v-model="form.last" style="width: 350px;" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="电话" prop="last">
                        <el-input v-model="form.last" style="width: 350px;" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="QQ" prop="last">
                        <el-input v-model="form.last" style="width: 350px;" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="last">
                        <el-input v-model="form.last" style="width: 350px;" placeholder="请输入" />
                    </el-form-item>
                    <el-row class="mb-4">
                        <el-button type="primary" style="width:80px">提交</el-button>
                        <el-button style="width:80px">返回</el-button>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>



<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'


import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'


const formSize = ref('default');
const ruleFormRef = ref<FormInstance>()
const value1 = ref('')
const size = ref<'' | 'large' | 'small'>('')
const ruleForm = reactive({
    name: '',
    number: '',
    region: '',
});
const form = reactive({
    address: '',
    desc: '',
    last: '',
    area:'',
    building:'',
    room:'',
    parking:'',
    place:'',
})
const rules = reactive({
    name: [
        { required: true, message: '请输入小区名字', trigger: 'blur' },
        { min: 3, max: 100, message: '长度3至100', trigger: 'blur' },
    ],
    number: [
        { required: true, message: '请输入小区编号', trigger: 'blur' },
        {
            validator: (rule, value, cbfn) => {
                const reg = /^\w{5}$/;
                if (!reg.test(value)) {
                    cbfn('请输入正确的编号！')
                }
                cbfn();
            }, trigger: 'blur'
        },
    ],
    region: [
        { required: true, message: '请选择地区', trigger: 'blur' },
    ]
});

const options = [
    {
        value: 'guide',
        label: 'Guide',
        children: [
            {
                value: 'disciplines',
                label: 'Disciplines',
                children: [
                    {
                        value: 'consistency',
                        label: 'Consistency',
                    },
                    {
                        value: 'feedback',
                        label: 'Feedback',
                    },
                    {
                        value: 'efficiency',
                        label: 'Efficiency',
                    },
                    {
                        value: 'controllability',
                        label: 'Controllability',
                    },
                ],
            },
            {
                value: 'navigation',
                label: 'Navigation',
                children: [
                    {
                        value: 'side nav',
                        label: 'Side Navigation',
                    },
                    {
                        value: 'top nav',
                        label: 'Top Navigation',
                    },
                ],
            },
        ],
    },
    {
        value: 'resource',
        label: 'Resource',
        children: [
            {
                value: 'axure',
                label: 'Axure Components',
            },
            {
                value: 'sketch',
                label: 'Sketch Templates',
            },
            {
                value: 'docs',
                label: 'Design Documentation',
            },
        ],
    },
]


const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
</script>

<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
}

.home {
    display: flex;
    flex-direction: column;
    align-items: center;

    // margin: 0 auto;
    .header {
        width: 907px;
        height: 120px;
        // height: 15%;
        background-color: #ffffff;
        margin: 15px 0;
        display: flex;
        flex-direction: column;
        // justify-content: center;

        p {
            font-size: 10px;
            color: rgb(163, 160, 160);
            margin: 14px 0 14px 25px;
        }

        span {
            margin-left: 25px;
        }
    }

    .bodyBox {
        width: 907px;
        height: 900px;
        background-color: #ffffff;
        margin-bottom: 15px;

        p {
            font-size: 18px;
            margin: 15px 0 0 25px;
        }

        
    }

    .information {
            display: flex;
            justify-content: center;

            .ss{
                margin-left: 10px;
            }
    }
    .el-form-item {
        margin: 20px 0;
    }

    .foot {
        width: 907px;
        height: 400px;
        background-color: #ffffff;
    }
    p{
        font-size: 18px;
        margin: 15px 0 0 25px;
    }
    .mb-4{
        display: flex;
        justify-content: center;
    }
}
</style>
<style>
.el-form-item__content {
    display: flex;
    justify-content: flex-start;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>